<template>
  <div>
    <div>Selected: {{ selected }}</div>

    <select v-model="selected" multiple>
      <option disabled value="">Please select one</option>
      <option value="dog">A</option>
      <option value="cat">B</option>
      <option value="mouse">C</option>
    </select>

    <div>Picked: {{ picked }}</div>

    <input type="radio" id="one" value="One" v-model="picked" />
    <label for="one">One</label>

    <input type="radio" id="two" value="Two" v-model="picked" />
    <label for="two">Two</label>

    <input type="checkbox" id="jack" value="a" v-model="checkedNames" />
    <label for="jack">jack</label>

    <input type="checkbox" id="john" value="b" v-model="checkedNames" />
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="c" v-model="checkedNames" />
    <label for="mike">Mike</label>
    <hr />
    <input type="checkbox" id="checkbox" v-model="checked" />
    <label for="checkbox">{{ checked }}</label>
    <p>Message is: {{ message }}</p>
    <input v-model="message" placeholder="edit me" />
    <textarea v-model="message"> </textarea>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
const message = ref("hello");
const checked = ref(true);
const checkedNames = ref(["b", "c", "a", "x"]);
const picked = ref(["One", "Two", "a", "x"]);
const selected = ref("A");
</script>
